<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>智慧教室控制面板</title>
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>

	<div class="container-fluid pc">

		<div class="wrapper col-lg-9 col-md-12 col-sm-12  col-lg-offset-1">

			<div class="h3"><b>智慧教室控制面板</b></div>

			<div id="content">
				<div class="left pull-left">
					<ul class="list-group moudle text-center">
						<li id="manual" class="list-group-item mode" value="1"><strong>手动模式</strong></li>
						<li id="auto" class="list-group-item mode" value="0"><strong>自动模式</strong></li>
					</ul>

					<ul class="list-group index">
						<li class="list-group-item"><img id="temp-img" src="img/temp.png"><span id="temp"></span></li>
						<li class="list-group-item"><img id="humidity-img" src="img/water.png"><span id="humidity"></span></li>
						<li class="list-group-item"><img id="light-img" src="img/sun.png"><span   id="light"></span></li>
						<li class="list-group-item"><img id="co2-img" src="img/co2.png"><span  id="co2"></span></li>
						<li class="list-group-item"><img id="voc-img" src="img/pm.png"><span  id="voc"></span></li>
					</ul>
				</div>

				<div id="right">
					<div id="content-top">
						<div id="content-top-left">
							<div id="title-a">
								<p>灯光控制区</p>
							</div>
							<div id="body-a">
								<div id="floodlight">
									<div id="floodlight-box">
										<input type="checkbox" id="led1" value="" />
									</div>
									<div id="floodlight-status">
										<button id="floodlight-increase" type="button" class="btn btn-info" style="width:35px;">+</button>
										<button id="floodlight-decrease" type="button" class="btn btn-default" style="width:35px;">-</button>
									</div>
									<div id="floodlight-text">
										<p>照明灯</p>
									</div>
								</div>
								<div id="shadow">
									<div id="shadow-box">
										<input type="checkbox" id="led2"  value="" />
									</div>
									<div id="shadow-status">
										<button id="shadow-increase" type="button" class="btn btn-info" style="width:35px;">+</button>
										<button id="shadow-decrease" type="button" class="btn btn-default" style="width:35px;">-</button>
									</div>
									<div id="shadow-text">
										<p>氛围灯</p>
									</div>
								</div>
							</div>
						</div>
						<div id="content-top-right">
							<div id="title-b">
								<p>窗帘控制区</p>
							</div>
							<div id="body-b">
								<div id="topbar">
									<div class="function lian">
										<img id="curtain1"  src="img/little/lianoff.png" value="0">
									</div>
									<div class="btn-group">
										<button id="curtain-stretch" type="button" class="btn btn-info" style="width:90%;height:30px;border-radius:2px;">拉伸</button>
										<button id="curtain-shrink" type="button" class="btn" style="background: rgb(231,235,244);width:90%;height:30px;margin-top:8px;border-radius:2px;">收缩</button>
									</div>
								</div>
								<div id="bottombar">
									<div class="function lian">
										<img id="curtain2" e_id=2 src="img/little/lianoff.png" value="0">
									</div>
									<div class="btn-group">
										<button type="button" class="btn btn-info" style="width:90%;height:30px;border-radius:2px;">拉伸</button>
										<button type="button" class="btn" style="background: rgb(231,235,244);width:90%;height:30px;margin-top:8px;border-radius:2px;">收缩</button>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div id="content-bottom">
						<div id="content-bottom-left">
							<div id="title-c">
								<p>监控区</p>
								<div id="monitor-button">
									<button class="pull-left" style="border:0;">人脸识别签到</button>
									<button class="pull-right" style="border:0;">课堂抬头率检测</button>
								</div>
								<div id="monitor-video">

								</div>
							</div>
						</div>
						<div id="content-bottom-right">
							<div id="title-d">
								<p>空调控制区</p>
							</div>
							<div id="box-7">
								<img id="up" src="img/little/_up.png">
							</div>
							<div id="box-8">
								<img id="hot" src="img/little/_sun.png">
							</div>
							<div id="box-9">
								<img id="cold"src="img/little/_snow.png">
							</div>
							<div id="box-10">
								<img id="down" src="img/little/_down.png">
							</div>
							<div id="box-cycle">
								<img id="cycle" src="img/little/_cycle.png">
							</div>
							<div id="box-temperature">
								<p id="degree"></p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="container-fluid phone_wrap">
		<div class="col-xs-12 phone">
			<div class="top_img" style="margin:20px auto;width:100%;height:200px;">
				<img src="img/1.jpg" style="width:100%;height:200px;border-radius:3px;">
			</div>
		</div>

			<div class="col-xs-12 phone_content">
				<div class="data_mode_wrap">
					<div class="data_mode">
						<div id="temp-phone" class="data">

						</div>
						<div class="text-center">
							温度
						</div>
					</div>
					<div class="data_mode">
						<div id="humidity-phone" class="data">

						</div>
						<div class="text-center">
							湿度
						</div>
					</div>
					<div class="data_mode">
						<div id="light-phone" class="data">

						</div>
						<div class="text-center">
							光照
						</div>
					</div>
					<div class="data_mode">
						<div id="co2-phone" class="data">

						</div>
						<div class="text-center">
							co2
						</div>
					</div>
					<div class="data_mode">
						<div id="voc-phone" class="data">

						</div>
						<div class="text-center">
							空气质量
						</div>
					</div>
				</div>

				<div class="control-wrap1">
					<div class="phone_mode pull-left">
						<ul class="list-group">
							<li id="manual-phone" class="list-group-item text-center mode_li">手动模式</li>
							<li id="auto-phone" class="list-group-item text-center mode_li">自动模式</li>
						</ul>
					</div>
					<div class="phone_curtain pull-right">
						<div class="h6">
							窗帘控制区
						</div>
						<div class="button_curtain">
							<div class="button_curtain_wrap pull-left">
								<img id="curtain1-phone" src="img/little/lianoff.png" class="img-responsive" value="0">
							</div>
							<div class="button_curtain_wrap pull-right">
								<img id="curtain2-phone" src="img/little/lianoff.png" class="img-responsive" value="0">
							</div>
						</div>
					</div>

				</div>
				<div class="control-wrap2">
					<div calss="h6">
						灯光控制区
					</div>
					<div class="light1_wrap pull-left">
						<div>
							<input id="led1-phone" type="checkbox" class="light1_input pull-left active" value="" />
							<div class="pull-right" style="height:80px;">
								<button id="floodlight-increase-phone" type="button" class="btn btn-info">+</button>
								<button id="floodlight-decrease-phone" type="button" class="btn btn-default">-</button>
							</div>
						</div>
						<div class="clearfix"></div>
						照明灯
					</div>

					<div class="light1_wrap pull-right" style="padding:20px 0;height:120px;width:45%;">
						<div>
							<input id="led2-phone" type="checkbox" class="light1_input pull-left" value="" />
							<div class="pull-right" style="height:80px">
								<button id="shadow-increase-phone" type="button" class="btn btn-info" >+</button>
								<button id="shadow-decrease-phone" type="button" class="btn btn-default">-</button>
							</div>
						</div>

						<div class="clearfix"></div>
						氛围灯
					</div>

				</div>
				<div class="control-wrap3">
					<p class="air_text_absolute">空调控制区</p>
					<div class="aircondition">
						<div class="aircondition_row_1">
							<img id="up-phone" src="img/little/_up.png" class="img-responsive">
						</div>
						<div class="aircondition_row_2">
							<div class="mode_code">
								<img id="cold-phone" src="img/little/_snow.png" class="img-responsive" >
							</div>
							<div class="air_data">
								<div class="switch">
									<img id="cycle-phone" src="img/little/_cycle.png" class="img-responsive">
								</div>
								<div class="degree text-center">
									<p id="degree-phone"></p>
								</div>
							</div>
							<div class="mode_hot">
								<img id="hot-phone" src="img/little/_sun.png" class="img-responsive">
							</div>
						</div>
						<div class="aircondition_row_3">
							<img id="down-phone" src="img/little/_down.png" class="img-responsive">
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script>

        var floodlight_increase;
        var floodlight_decrease;
        var shadow_increase;
        var shadow_decrease;

        var led1;
        var led2;

        var led1_status = 0;
        var led2_status = 0;

        var curtain1_step = 0;

        var manual;
        var auto;

        var temp;
        var humidity;
        var light;
        var co2;
        var voc;

        var curtain1;

        var stretch;
        var shrink;

        if($(document).width() > 768){
            floodlight_increase = $("#floodlight-increase")
            floodlight_decrease = $("#floodlight-decrease")
            shadow_increase = $("#shadow-increase")
            shadow_decrease = $("#shadow-decrease")

            led1=$("#led1");
            led2=$("#led2");

            manual = $("#manual")
            auto = $("#auto")

            temp = $("#temp")
            humidity = $("#humidity")
            light = $("#light")
            co2 = $("#co2")
            voc = $("#voc")

            curtain1 = $("#curtain1")

			stretch = $("#curtain-stretch")
			shrink = $("#curtain-shrink")

        }else{
            floodlight_increase = $("#floodlight-increase-phone")
            floodlight_decrease = $("#floodlight-decrease-phone")
            shadow_increase = $("#shadow-increase-phone")
            shadow_decrease = $("#shadow-decrease-phone")

            led1=$("#led1-phone");
            led2=$("#led2-phone");

            manual = $("#manual-phone")
            auto = $("#auto-phone")

            temp = $("#temp-phone")
            humidity = $("#humidity-phone")
            light = $("#light-phone")
            co2 = $("#co2-phone")
            voc = $("#voc-phone")

            curtain1 = $("#curtain1-phone")

            stretch = $("#stretch-phone")
            shrink = $("#shrink-phone")
        }

		/*$(window).resize(function(){
            if($(document).width() > 768){
                floodlight_increase = $("#floodlight-increase")
                floodlight_decrease = $("#floodlight-decrease")
                shadow_increase = $("#shadow-increase")
                shadow_decrease = $("#shadow-decrease")

                led1=$("#led1");
                led2=$("#led2");

                manual = $("#manual")
                auto = $("#auto")

                temp = $("#temp")
                humidity = $("#humidity")
                light = $("#light")
                co2 = $("#co2")
                voc = $("#voc")

                curtain1 = $("#curtain1")

                stretch = $("#curtain-stretch")
                shrink = $("#curtain-shrink")

            }else{
                floodlight_increase = $("#floodlight-increase-phone")
                floodlight_decrease = $("#floodlight-decrease-phone")
                shadow_increase = $("#shadow-increase-phone")
                shadow_decrease = $("#shadow-decrease-phone")

                led1=$("#led1-phone");
                led2=$("#led2-phone");

                manual = $("#manual-phone")
                auto = $("#auto-phone")

                temp = $("#temp-phone")
                humidity = $("#humidity-phone")
                light = $("#light-phone")
                co2 = $("#co2-phone")
                voc = $("#voc-phone")

                curtain1 = $("#curtain1-phone")

                stretch = $("#stretch-phone")
                shrink = $("#shrink-phone")
            }
            location.reload()
		})*/

        var json;

        $(document).ready(function(){

            manual.css("background","rgba(32, 178, 170, .6)")

            if(!led1.is(':checked')){
                floodlight_increase.attr("disabled", true)
                floodlight_decrease.attr("disabled", true)
            }
            if(!led2.is(':checked')){
                shadow_increase.attr("disabled", true)
                shadow_decrease.attr("disabled", true)
            }

            setInterval(front, 2000)

			setInterval(mode, 2000)
        })

        manual.click(function () {

            if(manual.val() == 0){
                manual.css("background","rgba(32, 178, 170, .6)")
                manual.val(1)
                auto.css("background","#fff")
                auto.val(0)
            }
        })

        auto.click(function () {

            if(auto.val() == 0){
                auto.css("background","rgba(32, 178, 170, .6)")
                auto.val(1)
                manual.css("background","#fff")
                manual.val(0)
            }
        })

		var mode = function () {

            if(auto.val() == 1){

                var light = parseInt(json.light)
				var temp = parseInt(json.temp)

                if(light < 200){

                    if(led1_status >= 1 && led1_status <= 5){
						led1_status = led1_status + 1;
						led1Ajax(led1_status)
                    }
                }else if(light > 700){

                    if(led1_status >= 1 && led1_status <= 5){
                        led1_status = led1_status - 1;
                        led1Ajax(led1_status)
                    }
                }else{

                }

                if(temp < 22){
                    var degree = ($("#degree").text());

                    if(degree == ""){
                        $("#degree").text(22 +"℃")
                        degree = parseInt($("#degree").text())
                        degreeAjax(degree)
					}else if(degree < 22){
                        $("#degree").text(parseInt(degree) + 1 +"℃")
                        degree = parseInt($("#degree").text())
                        degreeAjax(degree)
					}
				}else if(temp > 28){
                    var degree = ($("#degree").text());

                    if(degree == ""){
                        $("#degree").text(22 +"℃")
                        degree = parseInt($("#degree").text())
                        degreeAjax(degree)
                    }else if(degree > 28){
                        $("#degree").text(parseInt(degree) - 1 +"℃")
                        degree = parseInt($("#degree").text())
                        degreeAjax(degree)
                    }
				}
            }
        }

        var front = function () {

            $.ajax({
                type: 'get',
                url: './sensor',
                async : false,
                dataType: 'json',
                contentType:"application/json;charset=utf-8",
                success: function (result) {
                    json = result;
                },
                error: function () {
                    alert("系统出错");
                }
            })
            console.log(json)

            temp.text(Number(json.temp).toFixed(0) +" ℃")
            humidity.text(Number(json.humidity).toFixed(0) +" %")
            light.text(Number(json.light).toFixed(0) +" lux")
            co2.text(Number(json.co2 ).toFixed(0) +" ppm")
            voc.text(Number(json.voc).toFixed(0) +" ppb")
        }

        led1.click(function () {

            if(led1.is(':checked')){

                led1_status = 1
                floodlight_increase.attr("disabled", false)
                floodlight_decrease.attr("disabled", false)

                led1Ajax(led1_status)
            }
            else{
                led1_status = 0
                floodlight_increase.attr("disabled", true)
                floodlight_decrease.attr("disabled", true)

                led1Ajax(led1_status)
            }
        })

        var led1Ajax = function (status) {

            $.ajax({
                type: 'get',
                url: './toggle',
                data: {
                    led: status,
                },
                async : false,
                contentType:"application/json;charset=utf-8",
                success: function (result) {
                    console.log(result)
                },
                error: function () {
                    alert("系统出错");
                }
            })
        }

        led2.click(function () {

            if(led2.is(':checked')){
                led2_status = 1
                shadow_increase.attr("disabled", false)
                shadow_decrease.attr("disabled", false)

                led2Ajax(led2_status)
            }
            else{
                led2_status = 0
                shadow_increase.attr("disabled", true)
                shadow_decrease.attr("disabled", true)

                led2Ajax(led2_status)
            }
        })

        var led2Ajax = function (status) {

            $.ajax({
                type: 'get',
                url: './toggle',
                data: {
                    colorLed: status,
                },
                async : false,
                contentType:"application/json;charset=utf-8",
                success: function (result) {
                    console.log(result)
                },
                error: function () {
                    alert("系统出错");
                }
            })
        }

        // 云服务主机上的数据不更新亮度值
        floodlight_increase.click(function () {
            if(led1_status > 0 && led1_status < 5){
                led1_status = led1_status + 1;
                led1Ajax(led1_status)
                console.log(led1_status)
            }
        })
        floodlight_decrease.click(function () {
            if(led1_status > 1 && led1_status <= 5){
                led1_status = led1_status - 1;
                led1Ajax(led1_status)
                console.log(led1_status)
            }
        })

        // 云服务主机上的数据不更新亮度值
        shadow_increase.click(function () {
            if(led2_status > 0 && led2_status < 2){
                led2_status = led2_status + 1;
                led2Ajax(led2_status)
                console.log(led1_status)
            }
        })
        shadow_decrease.click(function () {
            if(led2_status > 1 && led2_status <= 2){
                led2_status = led2_status - 1;
                led2Ajax(led2_status)
                console.log(led1_status)
            }
        })

        //窗帘mqtt控制
        curtain1.click(function(){
            if($(this).val() == 0){
                curtain1_step = 1
                $(this).attr("src", "img/little/lianon.png")
                $(this).val(1)

                curtain1Ajax(curtain1_step)

            }else{
                curtain1_step = 0
                $(this).attr("src", "img/little/lianoff.png")
                $(this).val(0)

                curtain1Ajax(curtain1_step)
            }
        })

		var odd = 1;
        var even = 0;

		stretch.click(function () {

		    odd = odd + 2;
            curtain1Ajax(odd)
        })
		
		shrink.click(function () {

            even = even + 2
            curtain1Ajax(even)
        })

        var curtain1Ajax = function (step) {

            $.ajax({
                type: 'get',
                url: './toggle',
                data: {
                    curtain: step,
                },
                async : false,
                contentType:"application/json;charset=utf-8",
                success: function (result) {
                    console.log(result)
                },
                error: function () {
                    alert("系统出错");
                }
            })
        }

        //空调控制
		$("#cycle").click(function () {

            var degree = $("#degree").text();

            if(degree == ""){
                $("#degree").text(22 +"℃")
                degree = parseInt($("#degree").text())
                degreeAjax("1")
			}else{
                $("#degree").text("")
                degreeAjax("2")
			}
        })

        $("#up").click(function () {
            var degree = $("#degree").text();
            if(degree != ""){
                $("#degree").text(parseInt(degree) + 1 +"℃")
                degree = parseInt($("#degree").text())
                degreeAjax("3")
            }
        })

        $("#down").click(function(){
            var degree = $("#degree").text();
            if(degree != ""){
                $("#degree").text(parseInt(degree) - 1 +"℃")
                degree = parseInt($("#degree").text())
                degreeAjax("4")
            }
        })

        $("#hot").click(function(){
            degreeAjax("5")
        })

        $("#cold").click(function(){
            degreeAjax("6")
        })

        //空调控制
        $("#cycle-phone").click(function () {

            var degree = $("#degree-phone").text();

            if(degree == ""){
                $("#degree-phone").text(22 +"℃")
                degree = parseInt($("#degree-phone").text())
                degreeAjax("1")
            }else{
                $("#degree-phone").text("")
                degreeAjax("2")
            }
        })

        $("#up-phone").click(function () {
            var degree = $("#degree-phone").text();
            if(degree != ""){
                $("#degree-phone").text(parseInt(degree) + 1 +"℃")
                degree = parseInt($("#degree-phone").text())
                degreeAjax("3")
            }
        })

        $("#down-phone").click(function(){
            var degree = $("#degree-phone").text();
            if(degree != ""){
                $("#degree-phone").text(parseInt(degree) - 1 +"℃")
                degree = parseInt($("#degree-phone").text())
                degreeAjax("4")
            }
        })

        $("#hot-phone").click(function(){
            degreeAjax("5")
        })

        $("#cold-phone").click(function(){
            degreeAjax("6")
        })

		var degreeAjax = function (degree) {

            $.ajax({
                type: 'get',
                url: './toggle',
                data: {
                    degree: degree
                },
                async : false,
                contentType:"application/json;charset=utf-8",
                success: function (result) {
                    console.log(result)
                },
                error: function () {
                    alert("系统出错");
                }
            })
        }

	</script>

	</body>
</html>